<template>
    <div class="page">
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    methods: {
        *draw() {
            let width = 800,t=20000;
            const svg = d3
                .select("#container")
                .append("svg")
                .attr("width", width)
                .attr("height", 33)
                .attr("viewBox", `0 -20 ${width} 33`)
            while (true) {
                svg.selectAll("text")
                    .data(this.randomLetters(),d=>d)
                    .join(
                        enter =>
                            enter
                                .append("text")
                                .attr("fill", "green")
                                .attr("x", (d, i) => i * 16)
                                .attr("y", -30)
                                .text(d => d)
                                .call(enter =>
                                    enter.transition(t).attr("y", 0)
                                ),
                        update =>
                            update
                                .attr("fill", "black")
                                .attr("y", 0)
                                .call(update =>
                                    update
                                        .transition(t)
                                        .attr("x", (d, i) => i * 16)
                                ),
                        exit =>
                            exit.attr("fill", "brown").call(exit =>
                                exit
                                    .transition(t)
                                    .attr("y", 30)
                                    .remove()
                            )
                    )
                    .text(d => d)
                yield svg.node()
            }
        },
        randomLetters() {
            return d3
                .shuffle("abcdefghijklmnopqrstuvwxyz".split(""))
                .slice(0, Math.floor(6 + Math.random() * 20))
                .sort()
        },
        zuse() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve("好的")
                }, 2500)
            })
        }
    },
    mounted() {
        let dom = this.draw()
        setInterval(() => {
            dom.next()
        }, 2500)
    }
}
</script>
